<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <meta name="full-screen" content="yes">
  <meta name="browsermode" content="application">
  <meta name="x5-page-mode" content="app">
  <meta name=”screen-orientation” content=”portrait”>
  <meta name=”x5-orientation” content=”portrait”>
  <meta name=”x5-fullscreen” content=”true”>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
  <link rel="shortcut icon" href="/favicon.ico">
  <meta name="format-detection" content="telephone=no,date=no,address=no,email=no">
  <title>3G</title>
  <style>
    html {
      -ms-touch-action: none;
      /* 阻止windows Phone 的默认触摸事件 */
    }

    body,
    div,
    h1,
    h2,
    q,
    p {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: hidden;
    }

    #pageContain {
      overflow: hidden;
    }

    .page {
      display: none;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }

    .contain {
      width: 100%;
      height: 100%;
      display: none;
      position: relative;
      z-index: 0;
    }

    .current .contain,
    .slide .contain {
      display: block;
    }

    .current {
      display: block;
      z-index: 1;
    }

    .slide {
      display: block;
      z-index: 2;
    }

    .swipe {
      display: block;
      z-index: 3;
      transition-duration: 0ms !important;
      -webkit-transition-duration: 0ms !important;
    }
  </style>
</head>

<body>
  <div id="pageContain">
    <div class="page page1 current">
      <div class="contain">
        <span class="decorate decorate-web bg-web"></span>
        <span class="decorate decorate-android bg-android"></span>
        <span class="decorate decorate-ios bg-ios"></span>
        <span class="decorate decorate-java bg-java"></span>
        <div class="title-wrapper">
          <p class="first"><strong class="text-3g">3G</strong>实验室</p>
          <p class="second">邀请函</p>
        </div>
        <svg class="cursor" width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37 18L25 30L13 18" stroke-width="4" stroke-linecap="square" stroke-linejoin="bevel" />
        </svg>
      </div>
    </div>
    <div class="page page2">


      <div class="contain">
        <strong class="text-3g title" style="color: aliceblue;">为什么选择3G</strong>
        <div class="topOne">
          <div class="sc pageSquareT">
            <h4>设施完备</h4>
            <p>这里有充足的个人学习空间，显示器、饮水机等应有尽有</p>
          </div>
          <div class="sc pageSquareT">
            <h4>资源充足</h4>
            <p>实验室的图书角里有着各种书籍，还有学识过人的学长学姐为你答疑解惑</p>
          </div>
          <div class="sc pageSquareT">
            <h4>学术氛围</h4>
            <p>实验室的学术氛围浓郁，在这里大家一起学习共同进步</p>
          </div>
          <div class="sc pageSquareT">
            <h4>活动丰富</h4>
            <p>实验室不定期组织有趣团建活动，丰富大家的课余生活</p>
          </div>
        </div>

        <div class="bottomOne">
          <div class="sc pageSquareB">
            <h4>认识新朋友</h4>
            <p>在大学里认识新的朋友不仅能够让生活变丰富多彩还可以促进自己的方向发展</p>
          </div>
          <div class="sc pageSquareB">
            <h4>冲向大潮流</h4>
            <p>加入3G为你与未来接轨做出更好的铺垫，为你适应科技发展潮流打下基础</p>
          </div>
          <div class="sc pageSquareB">
            <h4>迈向高平台</h4>
            <p>实验室是高于课内的学习平台，在这里你可以获得更高的视野眺望到更远的世界</p>
          </div>
          <div class="sc pageSquareB">
            <h4>认识新自我</h4>
            <p>换个环境给自己一些压力，你会发掘自身的潜力，重新认识自己</p>
          </div>
        </div>
      </div>

      <div class="circle-wrapper">
        <i class="circle bg-web circle1"></i>
        <i class="circle bg-java circle2"></i>
        <i class="circle bg-ios circle3"></i>
        <i class="circle bg-android circle4"></i>
      </div>
    </div>
    <div class="page page3">
      <div class="contain">
        <strong class="title">3G</strong>
        <svg class="tree-wrapper" width="324" height="576" xmlns='http://www.w3.org/2000/svg'>
          <path d='M 162 500 V 420
          C 150 360 80 420 50 320
          A 1 1 0 0 1 50 240
          A 1 1 0 0 1 50 320
          ' fill='transparent' stroke='#00a3f4' stroke-width='5' stroke-linejoin='round' class="tree" />
          <path d='M 162 500
          V 380
          C 180 320 270 380 280 280
          A 1 1 0 0 1 280 200
          A 1 1 0 0 1 280 280' fill='transparent' stroke='#ff6756' stroke-width='5' stroke-linejoin='round'
            class="branch1" />
          <path d='M 162 500
          V 300
          C 150 200 100 260 90 180
          A 1 1 0 0 1 90 100
          A 1 1 0 0 1 90 180
          ' fill='transparent' stroke='#ff6a9a' stroke-width='5' stroke-linejoin='round' class="branch2" />
          <path d='M 162 500
          V 240
          C 170 140 230 190 240 120
          A 1 1 0 0 1 240 40
          A 1 1 0 0 1 240 120
          ' fill='transparent' stroke='#6ba143' stroke-width='5' stroke-linejoin='round' class="branch3" />
        </svg>
        <span class="tag tag1" index='1' event='tag'>前端</span>
        <span class="tag tag2" index='2' event='tag'>后台</span>
        <span class="tag tag3" index='3' event='tag'>IOS</span>
        <span class="tag tag4" index='4' event='tag'>Android</span>
        <div class="introduceDirection web bg-web" index='1' event='direction'>
          <h2 event='direction'>
            Web前端
          </h2>
          <p event='direction'>
            致力于基于HTML&CSS&JS的Web前端开发，以及以Node.js为主的Web后台开发。如今已上线多个项目，其中包括《xiyoumobile-admin》,《Interest》,《xiyoumobile-site》,《3gMusic》,《WVUE-UI》,《西邮读书会》等。我们追求最前沿的前端技术，在“斩码”的途中，大家也是互帮互助，披荆斩棘，培养了深厚的友谊。小组内学习氛围浓厚，闲暇时光更是欢乐无比，能让你找到真正的归属感。
          </p>
          <q event='direction'>
            性感表现代码，把不可能变成可能。
          </q>
        </div>
        <div class="introduceDirection java  bg-java" index='2' event='direction'>
          <h2 event='direction'>
            Java后台
          </h2>
          <p event='direction'>
            小组内成员积极讨论，项目合作开发集思广益，与其余小组成员之间互相帮助，你追我敢，积极讨论各种问题，使得我们能够灭霸(bug)而行。
          </p>
          <q event='direction'>
            从我们开始，让后端组还有实验室变得更好。
          </q>
        </div>
        <div class="introduceDirection ios bg-ios" index='3' event='direction'>
          <h2 event='direction'>
            iOS
          </h2>
          <p event='direction'>
            致力基于iOS系统的移动应用开发，主要使用 Objective-C 语言进行开发。
            有着先进的iOS开发设备，积极活跃的开发团队，团队成员互相合作，共同进步，积极参加各类竞赛。也正因如此，近几年来我们都取得了非常可观的成绩，如今已经有玩转西邮，西邮成绩，西邮图书馆，近健步行等多个APP上线，除此之外我们的就业率更是达到了百分之百，并且都是就职于腾讯，百度，爱奇艺，搜狐等大型互联网公司。
          </p>
          <q event='direction'>
            怀揣着对iOS开发的无限热情，我们共同进步。
          </q>
        </div>
        <div class="introduceDirection android bg-android" index='4' event='direction'>
          <h2 event='direction'>
            Android
          </h2>
          <p event='direction'>
            致力于 Android 移动平台的 APP 开发。
            组内活跃着学习的气息和交流的热情，是 Google 大学合作部——Android 人才培养示范基地。在这样的环境下，我们努力创造出自己的 APP，取得Google
            全国大学生移动互联网创新挑战赛金奖、银奖，爱奇艺全国高校技术大赛最佳创新奖等等。
          </p>
          <q event='direction'>
            我们，因共同热爱而聚集，为开发梦想而诞生。
          </q>
        </div>
      </div>
    </div>
    <div class="page page4">
      <div class="contain">
        <div class="title">
          <strong class="text-3g">加入我们</strong>
          <div class="decorate-line">
            <i class="block bg-web"></i>
            <i class="block bg-java"></i>
            <i class="block bg-android"></i>
            <i class="block bg-java"></i>
          </div>
          <svg class="bg-svg hide" width='160' height='240' xmlns='http://www.w3.org/2000/svg'>
            <polyline class="line1" points='0 40,0 0,160 0,160 200,160 240,0 240,0,40' stroke-width='3'
              fill='transparent' />
            <polyline class="line2" points='160 0,160 200,160 240,0 240,0 200,0 0,160 0' stroke-width='3'
              fill='transparent' />
            <polyline class="line3" points='160 200,160 240,0 240,0 200,0 0,160 0,160 200' stroke-width='3'
              fill='transparent' />
            <polyline class="line4" points='0 240,0 40,0 0,160 0,160 200,160 240,0 240,0 40' stroke-width='3'
              fill='transparent' />
          </svg>
          <div class="border-box">
            <div class="login-box">
              <div class="login-logo">欢迎登录</div>
              <div class="input-group">
                <div class="tips err invisible"><span>11</span></div>
                <div class="input-box">
                  <!-- <span>学号</span> -->

                  <input type="text" class="input input-id" id="id" name="id" autocomplete="off" event="text">
                  <label class="text" for="id">请输入学号</span>
                </div>
                <div class="input-box">
                  <!-- <span>密码</span> -->

                  <input type="password" class="input input-pass" id="password" name="password" autocomplete="off"
                    event="text">
                  <label class="text" for="password">请输入教务系统密码</span>
                </div>
              </div>
              <div class="btn-box">
                <div class="login btn" event="login">
                  <span event="login">确认</span>
                  <div class="btn-box-1 hide">
                    <span class="circle-1 bg-ios"></span>
                    <span class="circle-2 bg-java"></span>
                    <span class="circle-3 bg-web"></span>
                    <span class="circle-4 bg-android"></span>
                  </div>
                </div>

                <a href="./signup.html" class="hide" id="location"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  var browser = {
      versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
          trident: u.indexOf('Trident') > -1, //IE内核
          presto: u.indexOf('Presto') > -1, //opera内核
          webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
          mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
          android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
          iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
          iPad: u.indexOf('iPad') > -1, //是否iPad
          webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
          weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
          qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
      }(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    
    if (!(browser.versions.mobile || browser.versions.android || browser.versions.ios)) { 
      document.body.innerHTML = "<div style='background: linear-gradient(135deg, #686974, #25272c);overflow: hidden;height: 100vh;'><div style='margin-left: 40vw'><h1 style='margin-left: 0.5vw'>请使用手机扫码打开</h1><img src = './chitu_qrcode.png'></div></div>";
    }
</script>
</html>